<script setup lang="ts">
import { ref, reactive } from "vue";
import { HxqSelector } from "vue-mobile-hxq";
interface IselectorData {
  label: string;
  remark: string;
  ischeck: boolean;
  isdisabled: boolean;
}
const selectorData1: Array<IselectorData> = [
  { label: "选项一", remark: "", ischeck: false, isdisabled: false },
  { label: "选项二", remark: "有一点备注", ischeck: false, isdisabled: false },
  {
    label: "选项二",
    remark: "描述超级超级超级超级超级超级多的文案",
    ischeck: false,
    isdisabled: false,
  },
  {
    label: "选项三",
    remark: "描述超级超级超级超级超级超级超级超级超级超级超级多的文案",
    ischeck: false,
    isdisabled: false,
  },
];

const selectorData2: Array<IselectorData> = [
  { label: "选项四", remark: "", ischeck: false, isdisabled: false },
  { label: "选项五", remark: "有一点备注", ischeck: false, isdisabled: true },
  { label: "选项六", remark: "有一点备注", ischeck: false, isdisabled: false },
  { label: "选项七", remark: "有一点备注", ischeck: false, isdisabled: false },
  { label: "选项八", remark: "有一点备注", ischeck: false, isdisabled: true },
  { label: "选项九", remark: "有一点备注", ischeck: false, isdisabled: false },
  {
    label: "选项十",
    remark: "描述超级超级超级超级超级超级多的文案",
    ischeck: false,
    isdisabled: false,
  },
  {
    label: "选项十一",
    remark: "描述超级超级超级超级超级超级超级超级超级超级超级多的文案",
    ischeck: false,
    isdisabled: false,
  },
];

function getSelectorValues(items: IselectorData, key: string, type: string) {
  console.log(items);
  console.log(key);
  console.log(type);
}

const dataSource = reactive([
  {
    key: "1",
    name: "columns",
    param: "string",
    desc: "几列布局，一行几列",
  },
  {
    key: "1",
    name: "selectorData",
    param: " Array<IselectorData>",
    desc: "数据",
  },
  {
    key: "1",
    name: "isshowType",
    param: "boolean",
    desc: "是否展示标题后的（单选）、（多选）提示文字",
  },
  {
    key: "1",
    name: "keyName",
    param: "string",
    desc: "key值标识名称",
  },
  {
    key: "2",
    name: "selectorTitle",
    param: "string",
    desc: "标题名称",
  },
  {
    key: "3",
    name: "selectorType",
    param: "string",
    desc: "单选(radio)还是多选(check)",
  },
]);
</script>
<template>
    <div class="public-flex-box">
      <div class="public-phone-title">一行两列单选禁用</div>
      <div class="public-usage-box">
        <hxq-selector
          :isshowType="false"
          :selectorTitle="'有标题'"
          :selectorType="'radio'"
          columns="2"
          :selectorData="selectorData1"
          @getSelectorValues="getSelectorValues"
          keyName="one"
        ></hxq-selector>
      </div>
    </div>

    <div class="public-flex-box">
      <div class="public-phone-title">一行三列多选禁用</div>
      <div class="public-usage-box">
        <hxq-selector
          :selectorTitle="''"
          :selectorType="'check'"
          columns="3"
          :selectorData="selectorData2"
          @getSelectorValues="getSelectorValues"
          keyName="two"
        ></hxq-selector>
      </div>
    </div>
</template>

<style lang="scss" scoped>
.van-checkbox-group {
  display: flex;
  justify-content: space-between;
  ::v-deep .van-checkbox {
    height: 48px;
    line-height: 48px;
    // border-bottom: 1px solid #eeeeee;
  }
  ::v-deep .van-checkbox:last-child {
    border-bottom: none;
  }
}
</style>
